ActiveReports Developer 7
WPF Viewer
See Also Support Forum
ActiveReports Developer 7 > ActiveReports Developer Guide > Samples and Walkthroughs > Walkthroughs > WPF Viewer

Glossary Item Box

The ActiveReports WPF Viewer is a custom control that allows to easily view both section and page report layouts.

This walkthrough is split up into the following activities.

When you have completed this walkthrough, you will have the ActiveReports WPF Viewer displaying a report that looks similar to the following.


ShowTo create a WPF application in Visual Studio 2010

  1. On the Visual Studio File menu, click New Project.
  2. In the New Project dialog that appears, select WPF Application in the list of templates.
  3. Specify the name and location of the project and then сlick the OK button.
  4. In the Visual Studio Solution Explorer, right-click YourProject and select Add, then New Item.
  5. In the Add New Item dialog that appears, select the ActiveReports 7 Page Report and create the rptSingleLayout report as described in the Single Layout Reports walkthrough.

ShowTo add the WPF Viewer control

  1. In Solution Explorer, open MainWindow.xaml.
  2. From the Toolbox ActiveReports 7 tab, drag the Viewer control and drop it on the design view of MainWindow.xaml.
  3. In the Properties window, set the properties of the Viewer control as follows.
    Property Name Property Value
    HorizontalAlignment Stretch
    VerticalAlignment Stretch
    Margin 0
     
  4. In the Properties window, rename the Viewer control to viewer1.

ShowTo bind a report to the WPF Viewer

  1. In the Solution Explorer, select the rptSingleLayout report you have created.
  2. In the Properties window, set Copy to Output Directory to Copy Always.
  3. On MainWindow.xaml, with the viewer selected, go to the Properties window and double click the Loaded event.
  4. In the MainWindow code view that appears, add code like the following to the viewer1_loaded event to bind the report to the viewer. This code shows an .rdlx report being loaded but you can use an .rpx report as well.
    Visual Basic.NET code. Paste INSIDE the viewer1_Loaded event in MainWindow.xaml.vb. Copy Code 
    Viewer1.LoadDocument("rptSingleLayout.rdlx")
    C# code. Paste INSIDE the viewer1_Loaded event in MainWindow.xaml.cs. Copy Code 
    viewer1.LoadDocument("rptSingleLayout.rdlx");
Note: For an example of other ways to bind a report to the WPF Viewer, see the LoadDocument method in the Class Library documentation.

 

ShowTo view the report

Press F5 to run the project. The WPF Viewer displaying a report appears.

ShowTo customize the WPF Viewer

The ActiveReports WPF Viewer is a customizable control. You can easily change the look of the WPF Viewer and its elements, such as the error panel, search panel, sidebar and toolbar by modifying properties in the default WPF Viewer template (DefaultWPFiewerTemplates.xaml).


ShowTo add the customization template to the WPF project

  1. Open your WPF project.
  2. In Solution Explorer, select the YourProjectName node.
  3. On the Visual Studio Project menu, click Add Existing Item.
  4. In the dialog that appears, locate and select DefaultWPFViewerTemplates.xaml and click OK. You can find DefaultWPFViewerTemplates.xaml at [systemdrive]\Program Files\ComponentOne\ActiveReports Developer 7\Deployment\WPF\Templates folder (on a 64-bit Windows operating system, this file is located in [systemdrive]\Program Files (x86)\ComponentOne\ActiveReports Developer 7\Deployment\WPF\Templates).
  5. On MainWindow.xaml before the opening <Grid> tag, add the following code.
    Paste to the Design view of MainWindow.xaml before the opening <Grid> tag Copy Code 
    <Window.Resources>                                
<ResourceDictionary Source="DefaultWPFViewerTemplates.xaml" />
</Window.Resources>

ShowTo customize the WPF Viewer sidebar

  1. In Solution Explorer, double-click DefaultWPFViewerTemplates.xaml.
  2. In the file that opens, search for "thumbnails tab".
  3. In the GroupBox Header property of <!-- thumbnails tab -->, remove "{Binding Source={StaticResource res}, Path=Resources.ThumbnailsPanel_Title}" and type "THUMBNAILS".
  4. Search for "TabControl x:Name="Sidebar".
  5. In the Properties Window, go to the Background property and select the color "Yellow".
  6. Press F5 to see the customized viewer sidebar.

ShowTo add a customized button to the WPF Viewer toolbar

  1. In Solution Explorer, select the YourProjectName node.
  2. On the Visual Studio Project menu, select Add New Item.
  3. In the Add New Item dialog that appears, select Class, rename it to MyCommand and click Add.
  4. In the MyCommand.cs/vb that opens, add the following code to implement a command.

    ShowTo write the code in Visual Basic.NET

    Visual Basic.NET code. Add to MyCommand.vb Copy Code 
    Implements ICommand 
Public Function CanExecute(ByVal parameter As Object) As Boolean Implements System.Windows.Input.ICommand.CanExecute 
    Return True 
End Function

Public Event CanExecuteChanged(ByVal sender As Object, ByVal e As System.EventArgs) Implements System.Windows.Input.ICommand.CanExecuteChanged 


Public Sub Execute(ByVal parameter As Object) Implements System.Windows.Input.ICommand.Execute 
    MessageBox.Show("GrapeCity is the world's largest component vendor.", "About Us", MessageBoxButton.OK) 
End Sub

    ShowTo write the code in C#

    C# code. Add after the statement using System.Text; Copy Code 
    using System.Windows.Input;
using System.Windows;
    C# code. Add to MyCommand.cs Copy Code 
    public class MyCommand : ICommand
    {
        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            MessageBox.Show("GrapeCity is the world's largest component vendor.", "About Us", MessageBoxButton.OK);
        }

        public event EventHandler CanExecuteChanged;
    }
  5. In Solution Explorer, double-click DefaultWpfViewerTemplates.xaml.
  6. In the file that opens, add the following code.
    XML code. Add to DefaultWpfViewerTemplates.xaml Copy Code 
    <ResourceDictionary>
 ...                      
xmlns:YourProjectName="clr-namespace:YourProjectName"> 
<YourProjectName:MyCommand x:Key="MyCommand" />
...                       
</ResourceDictionary>

  7. In the same file, add the following code to add a button.
    XML code. Add to DefaultWpfViewerTemplates.xaml before the closing Toolbar tag Copy Code 
    <Button Command="{StaticResource MyCommand}" Content="About Us" />
  8. Press F5 to see the new customized button About Us in the Viewer toolbar.

See Also

Getting Started
Using the WPF Viewer

Page Report Walkthroughs
Single Layout Reports

©2014. ComponentOne, a division of GrapeCity. All rights reserved.